<template>
  <div>
    <h1>Header</h1>
    <p v-red>{{ message }}</p>
    <p v-bg="'green'">{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      message: "hello world",
    };
  },
  //使用directives配置项可以局部注册自定义指令
  //自定义指令函数接收的第一个参数 就是当前指令所在的元素
  //自定义指令函数的第二个参数，就是当前指令使用时的详细信息，里边有个value属性就是当前接收的值
  directives: {
    red(el) {
      el.style.backgroundColor = "red";
    },
    bg(el, binding) {
      // console.log(el, binding);
      el.style.background = binding.value;
    },
  },
};
</script>

<style></style>
